<template>
	<view class="editor">
		<!-- 帖子标题 -->
		<template v-if="titleStatus">
			<input
				v-if="titleView == 1"
				type="text"
				class="editor-title"
				placeholder="填写标题会更好哟(选填)"
				placeholder-class="editor-title-placeholder-class"
				maxlength="-1"
				v-model="postTitle">
		</template>
		<!-- 帖子内容 -->
		<textarea
			class="editor-content"
			placeholder="说点什么..."
			placeholder-class="editor-content-placeholder-class"
			maxlength="-1"
			auto-height="true"
			v-model="content"
			:show-confirm-bar="false"></textarea>
		<!-- 帖子内容 内容选项 -->
		<view class="content-options">
			<view class="_for" @click="clickPostIsCommentDisabledButton">
				<text class="text">评论</text>
				<text>{{postIsCommentDisabledText}}</text>
				<text class="iconfont icon-arrow-down-filling"></text>
			</view>
		</view>
		<!-- 附近与小组 -->
		<view class="nearby-and-group" style="bor">
			<view
				@click="clickMapButton"
				class="_for nearby-and-group-nearby">
				<text class="iconfont icon-dingwei1"></text>
				<text class="text">{{map.poi}}</text>
			</view>
			<view
				@click="clickGroupButton"
				v-if="groupStatus"
				class="_for nearby-and-group-group">
				<text class="iconfont icon-taolunqu"></text>
				<text class="text">{{groupText}}</text>
				<text class="iconfont icon-essential" v-if="groupRequired"></text>
				<text class="iconfont icon-arrow-down"></text>
			</view>
		</view>
		<!-- 小组选择 -->
		<view class="select-a-group" v-if="groupBox">
			<template v-if="groupListState == 'success'">
				<template v-for="item in groupList">
					<view class="_title">{{item.gname}}</view>
					<view
						@click="clickGroup(group.gid,group.gname)"
						class="_for"
						v-for="group in item.groups">
						<view class="_cover" v-if="group.cover">
							<image :src="group.cover" mode="widthFix"></image>
						</view>
						<view class="_center">{{group.gname}}</view>
						<view class="_right">
							<text>选择</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
				</template>
			</template>
			<template v-if="groupListState == 'loading'">
				<public-loading></public-loading>
			</template>
			<view style="padding-bottom: 25rpx;" v-if="groupListState == 'empty'">
				<public-empty></public-empty>
			</view>
		</view>
		<!-- 帖子内容 操作按钮 -->
		<view class="function-buttons">
			<template v-if="allConfig">
				<template v-if="allConfig.titleStatus">
					<view
						v-if="titleStatus"
						@click="clickTitleButton"
						:style="titleView == 1?'border: 1.5px solid #409EFF;':''"
						class="_for _for-text">
						<text class="_text" :style="titleView == 1?'color: #409EFF;':''">标</text>
					</view>
				</template>
				<view
					v-if="allConfig.draftStatus"
					@click="clickEditorDraft"
					class="_for _for-text ">
					<text class="_text">稿</text>
				</view>
				<template v-if="allConfig.imageStatus">
					<view
						@click="clickUploadImage"
						v-if="imageStatus"
						class="_for">
						<text class="iconfont icon-tupian"></text>
					</view>
				</template>
				<template v-if="allConfig.audioStatus">
					<view
						@click="clickAudioButton"
						v-if="audioStatus"
						class="_for">
						<text class="iconfont icon-yuyin" :style="audioBox?'color: #409EFF;':''"></text>
					</view>
				</template>
				<template v-if="allConfig.videoStatus">
					<view
						@click="clickVideoButton"
						v-if="videoStatus"
						class="_for">
						<text class="iconfont icon-zhibo"></text>
					</view>
				</template>
				<template v-if="allConfig.emojiStatus">
					<!-- 原生表情 -->
					<template v-if="stickers">
						<view
							@click="clickStickersButton"
							v-if="emojiStatus"
							class="_for">
							<text class="iconfont icon-smile" :style="stickersBox?'color: #409EFF;':''"></text>
						</view>
					</template>
					<!-- Emoji表情 -->
					<template v-if="!stickers">
						<view
							@click="clickEmojiButton"
							v-if="emojiStatus"
							class="_for">
							<text class="iconfont icon-smile" :style="emojiBox?'color: #409EFF;':''"></text>
						</view>
					</template>
				</template>
				<template v-if="allConfig.mentionStatus">
					<view
						@click="$_To('editor/editorAceTex')"
						v-if="mentionStatus"
						class="_for">
						<text class="iconfont icon-shequ"></text>
					</view>
				</template>
				<template v-if="allConfig.hashtagStatus">
					<view
						@click="$_To('editor/editorHashtag')"
						v-if="hashtagStatus"
						class="_for">
						<text class="iconfont icon-huati"></text>
					</view>
				</template>
				<template v-if="allConfig.postQuoteStatus">
					<view
						v-if="postQuoteStatus"
						@click="$_To('editor/editorQuotePost')"
						class="_for">
						<text class="iconfont icon-yinyong1"></text>
					</view>
				</template>
				<template v-if="allConfig.htmlStatus">
					<view
						@click="clickHtmlButton"
						class="_for">
						<text class="iconfont icon-keyboard-26" :style="htmlBox?'color: #409EFF;':''"></text>
					</view>
				</template>
				<template v-if="allConfig.presetStatus">
					<view
						v-if="presetStatus"
						@click="$_To('editor/preset')"
						class="_for">
						<text class="iconfont icon-operation"></text>
					</view>
				</template>
				<view
					@click="clickButtonSave"
					class="_for _save"
					v-if="allConfig.save">
					<text class="iconfont icon-save"></text>
				</view>
				<view
					@click="clickEmptyButton"
					class="_for _empty"
					v-if="allConfig.emptyStatus">
					<text class="iconfont icon-shanchu"></text>
				</view>
			</template>
			<template v-else>
				<view class="_for-loading loading-css"></view>
				<view class="_for-loading loading-css"></view>
				<view class="_for-loading loading-css"></view>
				<view class="_for-loading loading-css"></view>
				<view class="_for-loading loading-css"></view>
				<view class="_for-loading loading-css"></view>
				<view class="_for-loading loading-css"></view>
				<view class="_for-loading loading-css"></view>
			</template>
			
			<!-- <template v-if="true"> emptyStatus
				<view
					@click="$_To('editor/graffiti')"
					class="_for">
					<text class="iconfont icon-electronics"></text>
				</view>
			</template> -->
		</view>
		<view class="html" v-if="htmlBox">
			<view @click="clickHtmlMore">h1 ~ h6</view>
			<view @click="clickHtml('Bold')">加粗</view>
			<view @click="clickHtml('Italic')">斜体</view>
			<view @click="clickHtml('Quote')">引用</view>
			<view @click="clickHtml('List')">列表</view>
			<view @click="clickHtml('Code')">代码</view>
			<view @click="clickHtml('Href')">链接</view>
			<view @click="clickHtml('Img')">图片</view>
		</view>
		<!-- 引用帖子相关 -->
		<view class="post-quote" v-if="postQuoteTitle">
			<text class="iconfont icon-yinyong"></text>
			<text class="_title">{{postQuoteTitle}}</text>
			<text class="_delete" @click="clickPostQuoteButton">删除</text>
		</view>
		<!-- 录音按钮 -->
		<view
			@click="clickAudio"
			v-if="audioBox"
			class="audio">
			{{audioText == '单击录音'?'单击录音':audioText+'秒'}}
		</view>
		<!-- emojiBox表情选择框 -->
		<view class="emoji" v-if="emojiBox">
			<template v-if="emojiList.length">
				<view
					@click="clickEmoji(item)"
					v-for="item in emojiList">{{item}}</view>
			</template>
			<template v-else>
				<view style="display: flex;align-items: center;justify-content: center;font-size: 28rpx;line-height: 28rpx;padding: 25rpx 0;color: #C0C4CC;">
					Loading...
				</view>
			</template>
		</view>
		<!-- 原生表情框子 -->
		<view class="stickers" v-if="stickersBox">
			<view class="stickers-tab">
				<template v-for="(item,index) in stickersTabList">
					<view
						@click="clickStickersTabButton(index,item.code)"
						:style="stickersTab==index?'color: #409EFF;':''"
						class="_for">
						{{item.name}}
					</view>
				</template>
			</view>
			<template v-if="stickersListStatus == 'success'">
				<view class="stickers-content">
					<scroll-view
						scroll-y
						>
						<view
							@click="clickStickers(item.codeFormat)"
							class="_for"
							v-for="item in stickersList">
							<image :src="item.image" mode="widthFix"></image>
						</view>
					</scroll-view>
				</view>
			</template>
			<template v-if="stickersListStatus == 'loading'">
				<public-loading></public-loading>
			</template>
			<template v-if="stickersListStatus == 'empty'">
				<public-empty></public-empty>
			</template>
		</view>
		<!-- 附件 -->
		<!-- 图片附件 -->
		<view
			class="file-image"
			v-if="imageList.length">
			<view
				@click="$_picturePreview(index,imageList)"
				v-for="(item,index) in imageList"
				class="_for">
				<view class="_delete" @click.stop="clickDeleteFileButton(item.fid)">
					<text class="iconfont icon-close"></text>
				</view>
				<view class="_for-image">
					<image :src="item.imageBigUrl" mode="scaleToFill"></image>
				</view>
				<view class="_insert" @click.stop="clickInsertFileButton(item.fid)">插入正文</view>
			</view>
		</view>
		<!-- 音频附件 -->
		<view
			class="file-audio"
			v-if="audioList.length">
			<view
				class="_for"
				v-for="item in audioList">
				<view>
					<public-audio
						Css="width:279.5rpx;"
						:Url="item.audioUrl"></public-audio>
				</view>
				<text
					class="iconfont icon-close"
					@click.stop="clickDeleteFileButton(item.fid)"></text>
			</view>
		</view>
		<!-- 视频附件 -->
		<view
			class="file-video"
			v-if="videoList.length">
			<view
				class="_for"
				@click="$_To('public/video?url=' + item.videoUrl)"
				v-for="item in videoList">
				<view class="_delete" @click.stop="clickDeleteFileButton(item.fid)">删除本视频</view>
				<view class="_play">
					<text class="iconfont icon-play"></text>
				</view>
				<view class="_insert" @click.stop="clickInsertFileButton(item.fid)">插入到正文</view>
			</view>
		</view>
		
		
		<!-- 尾部 草稿、保存、发布等按钮 -->
		<view class="footer-button">
			<view
				@click="clickPublishButton"
				class="_for"
				style="background: #F56C6C;color: #FFF;">
				{{editorPostType=='new'?'发表内容':'编辑内容'}}
			</view>
			<!-- <view
				@click="clickButtonSave"
				class="_for">保存草稿</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allConfig:null,//Config.json
				postTitle:"",//帖子标题
				titleStatus:false,//是否启用标题
				titleView:1,//是否显示标题输入框
				content:"",//正文内容
				groupGid:"",//小组gid
				groupText:"小组分类",
				groupBox:false,//选择小组列表
				groupStatus:false,//是否开启
				groupRequired:false,//是否必选
				groupListState:"loading",//小组列表加载状态
				groupList:[],//小组列表
				postIsCommentDisabled:false,//禁止评论
				postIsCommentDisabledText:"可以评论",
				mapStatus:false,//是否开启地图
				map:{
					mapId:4,
					latitude: "",
					longitude: "",
					poi:"让附近的人看看",
					poiId:"",
					address:""
				},
				imageStatus:false,//是否开启了图片功能
				imageUploadNumber:9,//图片上传数量
				imageList:[],//图片列表
				
				audioBox:false,//音频录制
				audioStatus:false,//是否开启了音频功能
				audioUploadNumber:9,//音频上传数量
				audioList:[],//音频列表
				audioText:"单击录音",
				audioStartStatus:false,//录音开始状态
				
				videoStatus:false,//是否开启了视频功能
				videoUploadNumber:9,//视频上传数量
				videoList:[],//视频列表
				
				emojiBox:false,//表情框子
				emojiStatus:false,//是否开启了表情功能
				emojiList:[],//表情列表
				
				mentionStatus:false,//是否启用了艾特
				hashtagStatus:false,//是否启用了话题
				hashtagFormat:1,//1为#，2为##
				
				postQuoteStatus:true,//是否启用了引用
				postQuotePid:"",//引用帖子pid
				postQuoteTitle:"",//引用帖子标题
				
				htmlStatus:true,//是否启用了HTML按钮
				htmlBox:false,//插入html按钮
				
				presetStatus:true,//是否启用了预置内容按钮
				
				deleteFileFid:"",//附件Fid
				
				editorPostType:"new",//默认为新建
				
				stickers:false,//是否开启系统表情？如果为 false 则启用 emoji 表情
				stickersBox:false,//原生表情框子
				stickersTab:0,//原生表情多个切换卡
				stickersTabList:[],//切换卡列表
				stickersListDefault:"",//默认表情列表
				stickersList:[],//原生表情列表
				stickersListStatus:"loading",//原生表情加载状态
				
				successUrl:false,//发布成功后返回指定页面
				successUrlType:0,//是导航页还是其他页面，0为导航，1为其他
			}
		},
		mounted(){
			uni.$on('aiteUser',(data) => {
				this.content += data.msg;
			})
			uni.$on('hashtag',(data) => {
				if(this.hashtagFormat == 1){
					this.content += ' #'+data.msg+' ';
				}else{
					this.content += ' #'+data.msg+'# ';
				}
			})
			uni.$on('quotePost',(data) => {
				this.postQuotePid = data.pid;
				this.postQuoteTitle = data.tit;
			})
			uni.$on('preset',(data) => {
				this.content += data.msg;
			})
		},
		onUnload() {
			clearInterval(this.timer)
			uni.$off('aiteUser')
			uni.$off('hashtag')
			uni.$off('quotePost')
			uni.$off('preset')
		},
		onLoad(e) {
			// 如果未登录
			if(!this.$_loginOrNot()){
				this.$_notLoggedInPrompt()
			}
			// 是否有小组id
			if(e.gid){
				this.groupGid = e.gid;
			}
			// 是否有小组名称
			if(e.gname){
				this.groupText = e.gname;
			}
			if(e.hid){
				this.content += e.hid;
			}
			if(e.aceTex){
				this.content += e.aceTex
			}
			if(e.content){
				this.content += e.content
			}
			if(e.postQuotePid){
				this.postQuotePid = e.postQuotePid
				this.$_Request(
					"GET","/api/v2/post/"+this.postQuotePid+"/detail",
					{
						"whitelistKeys":"title,content"
					},
					(ref) => {
						if(ref.data.data.detail.title){
							this.postQuoteTitle = ref.data.data.detail.title;
						}else{
							this.postQuoteTitle = this.$_filterHtml(ref.data.data.detail.content)
						}
					}
				)
			}
			// 获取草稿ID
			if(e.id){
				this.draftId = e.id;
			}
			// new 为新建 edit 为编辑
			if(e.type){
				this.editorPostType = e.type;
				uni.request({
					url:this.$_Config() + "Config.json",
					success: (res) => {
						this.allConfig = res.data.editor.editor;
						this.stickers = res.data.stickers;
						// 获取编辑器配置
						this.getEditorPostConfig();
					}
				})
			}else{
				uni.showToast({
					title: '参数出错,联系管理员',
					duration: 1000,
					icon:'none'
				});
				setTimeout(()=>{
					uni.navigateBack();
				},1000);
			}
			if(e.aceTex){
				this.content += e.aceTex
			}
			if(e.trigger){
				if(e.trigger == 'image'){
					this.clickUploadImage();
				}
				if(e.trigger == 'video'){
					this.clickVideoButton();
				}
				if(e.trigger == 'location'){
					setTimeout(()=>{
						this.clickMapButton();
					},1000);
				}
			}
			if(e.successUrl){
				this.successUrl = e.successUrl;
				this.successUrlType = e.successUrlType;
			}
		},
		methods: {
			// 获取编辑器配置
			getEditorPostConfig(){
				this.$_Request(
					"GET","/api/v2/editor/post/config",{},
					(res) => {
						const s = res.data.data;
						//是否启用标题
						this.titleStatus = s.editor.toolbar.title.status;
						this.titleView = s.editor.toolbar.title.view;
						//是否开启小组
						this.groupStatus = s.editor.features.group.status;
						//是否必选小组
						this.groupRequired = s.editor.features.group.required;
						// 是否开启地图
						this.mapStatus = s.editor.features.location.status;
						
						// 是否开启图片上传
						this.imageStatus = s.editor.toolbar.image.status;
						// 图片上传数量
						this.imageUploadNumber = s.editor.toolbar.image.uploadNumber;
						this.audioStatus = s.editor.toolbar.audio.status;
						this.audioUploadNumber = s.editor.toolbar.audio.uploadNumber;
						
						this.videoStatus = s.editor.toolbar.video.status;
						this.videoUploadNumber = s.editor.toolbar.video.uploadNumber;
						this.emojiStatus = s.editor.toolbar.sticker;
						
						this.mentionStatus = s.editor.toolbar.mention.status;
						
						this.hashtagStatus = s.editor.toolbar.hashtag.status;
						this.hashtagFormat = s.editor.toolbar.hashtag.format;
						
						// 新建帖子内容
						if(this.editorPostType == 'new'){
							uni.setNavigationBarTitle({ title: '新建帖子' })
							// 创建草稿内容
							this.postEditorPostCreate();
						}
						// 编辑帖子内容
						if(this.editorPostType == 'edit'){
							uni.setNavigationBarTitle({ title: '编辑帖子' })
							// 获取草稿详情
							this.getEditorPost();
						}
					}
				)
			},
			// 创建草稿内容
			postEditorPostCreate(){
				this.$_Request(
					"POST","/api/v2/editor/post/create",
					{
						"createType":1
					},
					(res) => {
						if(res.data.code == 0){
							// 获取草稿ID
							this.draftId = res.data.data.detail.id;
						}else{
							uni.showToast({
								title: res.data.message,
								duration: 1000,
								icon:"none"
							});
							setTimeout(()=>{
								uni.navigateBack();
							},1000);
						}
					}
				)
			},
			// 更新草稿内容
			putEditorPost(type){
				this.$_Request(
					"PUT","/api/v2/editor/post/" + this.draftId,
					{
						"postQuotePid":this.postQuotePid,//引用的帖子 PID
						"postGid":this.groupGid,//小组
						"postTitle":this.postTitle,//标题
						"postIsCommentDisabled":this.postIsCommentDisabled,//是否禁止评论
						"postIsCommentPrivate":"",//是否私有评论
						"content":this.content,//正文内容
						"isMarkdown":true,//内容是否为 MD 格式
						"isAnonymous":false,//是否匿名
						"map":this.map.latitude?this.map:"",//位置信息
						"deleteMap":"",//删除位置信息
						"deleteFile":this.deleteFileFid,//删除文件，传参 fid
					},
					(res) => {
						if(res.data.code === 0){
							// 发表按钮
							if(type == 'clickPublishButton'){
								// 提交发表（或审核）
								this.postEditorPost();
							}
							// 删除附件按钮
							if(type == 'clickDeleteFileButton'){
								// 获取草稿详情
								this.getEditorPost();
							}
							// 保存草稿按钮
							if(type == 'clickButtonSave'){
								uni.hideLoading();
							}
						}else{
							uni.showToast({
								title: res.data.message,
								duration: 1000,
								icon:"none"
							});
						}
					}
				)
			},
			// 获取草稿详情
			getEditorPost(){
				this.$_Request(
					"GET","/api/v2/editor/post/" + this.draftId,{},
					(res) => {
						const s = res.data.data;
						if(s.detail.title){
							this.postTitle = s.detail.title;
							this.titleView = 1;
						}
						if(s.detail.content){
							this.content = s.detail.content;
						}
						// 是否禁止评论
						this.postIsCommentDisabled = s.detail.isCommentDisabled;
						if(this.postIsCommentDisabled){
							this.postIsCommentDisabledText = "禁止评论"
						}else{
							this.postIsCommentDisabledText = "可以评论"
						}
						if(s.detail.mapJson){
							this.map = {
								"mapId":4,
								"latitude": s.detail.mapJson.latitude,
								"longitude": s.detail.mapJson.longitude,
								"poi":s.detail.mapJson.poi,
								"poiId":'',
								"address":s.detail.mapJson.address
							}
						}
						if(s.detail.group){
							this.groupGid = s.detail.group.gid;
							this.groupText = s.detail.group.gname;
						}
						
						this.imageList = s.detail.files.images;
						this.audioList = s.detail.files.audios;
						this.videoList = s.detail.files.videos;
						if(s.detail.quotedPid){
							this.postQuotePid = s.detail.quotedPid;
							this.$_Request(
								"GET","/api/v2/post/"+this.postQuotePid+"/detail",
								{
									"whitelistKeys":"title,content"
								},
								(ref) => {
									if(ref.data.data.detail.title){
										this.postQuoteTitle = ref.data.data.detail.title;
									}else{
										this.postQuoteTitle = this.$_filterHtml(ref.data.data.detail.content)
									}
								}
							)
						}
					}
				)
			},
			// 提交发表（或审核）
			postEditorPost(){
				this.$_Request(
					"POST","/api/v2/editor/post/" + this.draftId,{},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.$store.commit('mutationsStatelistStatus',true)
							if(this.successUrl){
								if(this.successUrlType == 0){
									uni.switchTab({
										url:"/pages/"+this.successUrl
									})
								}
								if(this.successUrlType == 1){
									uni.redirectTo({
										url:"/pages/"+this.successUrl
									})
								}
							}else{
								uni.navigateBack();
							}
						}else{
							uni.showModal({
								title: res.data.message,
								content: res.data.data.join(' | '),
								success: (res_) => {
									if(res_.confirm){
										uni.switchTab({
											url:"/pages/my/my"
										})
									}
								}
							});
						}
					}
				)
			},
			// 发表按钮
			clickPublishButton(){
				uni.showLoading();
				// 更新草稿
				this.putEditorPost('clickPublishButton');
			},
			// 点击是否评论
			clickPostIsCommentDisabledButton(){
				uni.showActionSheet({
					itemList: ['可以评论','禁止评论'],
					success: (res) => {
						if(res.tapIndex == 0){
							this.postIsCommentDisabled = false;
							this.postIsCommentDisabledText = "可以评论";
						}
						if(res.tapIndex == 1){
							this.postIsCommentDisabled = true;
							this.postIsCommentDisabledText = "禁止评论";
						}
					}
				});
			},
			// 点击选择打开选择小组列表按钮
			clickGroupButton(){
				this.groupBox = !this.groupBox;
				if(this.groupBox){
					this.$_Request(
						"GET","/api/v2/group/tree",
						{
							"whitelistKeys":"gname,gid,cover"
						},(res) => {
							if(res.data.data.length){
								this.groupList = res.data.data;
								this.groupListState = "success"
							}else{
								this.groupListState = "empty"
							}
						}
					)
				}
			},
			// 选中小组
			clickGroup(gid,gname){
				this.groupText = gname;
				this.groupGid = gid;
				this.groupBox = false;
			},
			// 点击地图按钮
			clickMapButton(){
				uni.chooseLocation({
					success: (res) => {
						this.map = {
							"mapId":4,
							"latitude": res.latitude,
							"longitude": res.longitude,
							"poi":res.name,
							"poiId":'',
							"address":res.address
						}
					}
				});
			},
			// 点击上传图片按钮
			clickUploadImage(){
				if(this.imageList.length >= this.imageUploadNumber){
					uni.showToast({
						title: '已经够数了哦',
						duration: 1000,
						icon:"none"
					});
				}else{
					uni.chooseImage({
						count:this.imageUploadNumber,
						success: (res) => {
							this.UploadImage(res.tempFiles)
						}
					})
				}
			},
			// 上传图片
			UploadImage(params){
				uni.showLoading({ title: "上传中" });
				return new Promise((presolve, preject) => {
					let uploads = [];
					(params).forEach((item, i) => {
						uploads[i] = new Promise((resolve) => {
							uni.uploadFile({
								url: this.$_Url() + "/api/v2/common/upload-file",
								filePath: item.path,
								name: "file",
								header: this.$_FresnsHeader(),
								formData:{
									"usageType":1,
									"tableName":"post_logs",
									"tableColumn":"id",
									"type":"image",
									"uploadMode":"file",
									"tableId":this.draftId
								},
								success(res) {
									if(JSON.parse(res.data).code == 0){
										resolve()
									}else{
										uni.hideLoading();
										uni.showToast({
											title: JSON.parse(res.data).message,
											icon: 'none',
											duration: 1000
										});
										setTimeout(()=>{
											resolve()
										},1000);
									}
								},
								fail(err) {
									
								}
							})
						})
					})
					Promise.all(uploads).then(res => {
						//图片上传完成
						presolve(res)
						uni.hideLoading();
						// 获取草稿详情
						this.getEditorPost();
					}).catch(err => {
						preject(err)
						uni.showToast({
							title: '上传失败请重试',
							icon: 'none'
						})
					})
				})
			},
			// 点击音频按钮
			clickAudioButton(){
				this.audioBox = !this.audioBox;
			},
			// 开始录音按钮
			clickAudio(){
				if(this.audioList.length >= this.audioUploadNumber){
					uni.showToast({
						title: '已经够数了哦',
						duration: 1000,
						icon:"none"
					});
				}else{
					this.audioStartStatus = !this.audioStartStatus;
					if(this.audioStartStatus){
						uni.getRecorderManager().start();
						this.audioText = 1;
						this.timer = setInterval(() => {
							this.audioText += 1;
							if(this.audioText == 59){
								this.audioText = "单击录音";
								this.audioStartStatus = false;
								clearInterval(this.timer)
								uni.getRecorderManager().stop();
								uni.getRecorderManager().onStop((res) => {
									this.UploadAudio(res.tempFilePath)
								});
							}
						}, 1000);
					}else{
						this.audioText = "单击录音";
						this.audioStartStatus = false;
						clearInterval(this.timer)
						uni.getRecorderManager().stop();
						uni.getRecorderManager().onStop((res) => {
							this.UploadAudio(res.tempFilePath)
						});
					}
				}
			},
			// 录音上传方法
			UploadAudio(audio){
				let _this = this;
				uni.showLoading();
				uni.uploadFile({
					url: _this.$_Url() + "/api/v2/common/upload-file",
					filePath: audio,
					name: "file",
					header: _this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"post_logs",
						"tableColumn":"id",
						"type":"audio",
						"tableKey":"",
						"uploadMode":"file",
						"tableId":_this.draftId
					},
					success(res) {
						if(JSON.parse(res.data).code == 0){
							_this.buttonAudioText = "单击录音";
							_this.buttonAudioState = false;
							_this.boxAudio = false;
							uni.hideLoading();
							// 获取草稿详情
							_this.getEditorPost();
						}else{
							uni.showToast({
								title: JSON.parse(res.data).message,
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			},
			// 点击视频按钮
			clickVideoButton(){
				if(this.videoList.length >= this.videoUploadNumber){
					uni.showToast({
						title: '已经够数了哦',
						duration: 1000,
						icon:"none"
					});
				}else{
					uni.chooseVideo({
						maxDuration:60,
						success: (res) => {
							this.UploadVideo(res.tempFilePath)
						}
					})
				}
			},
			// 视频上传方法
			UploadVideo(video){
				let _this = this;
				uni.showLoading();
				uni.uploadFile({
					url: _this.$_Url() + "/api/v2/common/upload-file",
					filePath: video,
					name: "file",
					header: _this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"post_logs",
						"tableColumn":"id",
						"type":"video",
						"tableKey":"",
						"uploadMode":"file",
						"tableId":_this.draftId
					},
					success(res) {
						uni.hideLoading();
						if(JSON.parse(res.data).code == 0){
							_this.getEditorPost();
							uni.hideLoading();
						}else{
							uni.showToast({
								title: JSON.parse(res.data).message,
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			},
			// 点击Emoji表情按钮
			clickEmojiButton(){
				this.emojiBox = !this.emojiBox;
				if(this.emojiBox){
					uni.request({
						url:this.$_Config() + "Config.json",
						success: (res) => {
							this.emojiList = res.data.allEmoji;
						}
					})
				}
			},
			// 选中Emoji表情
			clickEmoji(item){
				this.content += item;
				this.emojiBox = false;
			},
			// 点击原生表情按钮
			clickStickersButton(){
				this.stickersBox = !this.stickersBox;
				this.stickersListStatus = "loading";
				this.stickersList = [];
				this.stickersTab = 0;
				this.$_Request(
					"GET","/api/v2/global/stickers",{},
					(res) => {
						this.stickersTabList = res.data.data;
						this.stickersListDefault = res.data.data[0].code;
						if(res.data.data[0].stickers.length){
							this.stickersList = res.data.data[0].stickers;
							this.stickersListStatus = "success"
						}else{
							this.stickersListStatus = "empty"
						}
					}
				)
			},
			// 点击，原生表情切换卡
			clickStickersTabButton(index,type){
				this.stickersListStatus = "loading"
				this.stickersTab = index;
				this.stickersList = [];
				for(let i=0;i<this.stickersTabList.length;i++){
					if(type == this.stickersTabList[i].code){
						if(this.stickersTabList[i].stickers.length){
							this.stickersList = this.stickersTabList[i].stickers;
							this.stickersListStatus = "success"
						}else{
							this.stickersListStatus = "empty"
						}
					}
				}
			},
			// 点击，选中表情
			clickStickers(item){
				this.content += item;
				this.stickersBox = false;
			},
			// 点击插入html按钮
			clickHtmlButton(){
				this.htmlBox = !this.htmlBox
			},
			clickHtml(type){
				if(type == 'Bold'){
					this.content += `**粗**`;
				}
				if(type == 'Italic'){
					this.content += `*斜*`;
				}
				if(type == 'Quote'){
					this.content += `> `;
				}
				if(type == 'List'){
					this.content += `- `;
				}
				if(type == 'Code'){
					this.content += "\n```\n[代码]\n```\n";
				}
				if(type == 'Href'){
					this.content += `[锚文本](https://URL)`;
				}
				if(type == 'Img'){
					this.content += `![图片](URL)`;
				}
			},
			// 选择 H 系列标签
			clickHtmlMore(){
				uni.showActionSheet({
					itemList: ['H1','H2','H3','H4','H5','H6'],
					success: (res) => {
						if(res.tapIndex == 0){
							this.content += `\n # \n`;
						}
						if(res.tapIndex == 1){
							this.content += `\n ## \n`;
						}
						if(res.tapIndex == 2){
							this.content += `\n ### \n`;
						}
						if(res.tapIndex == 3){
							this.content += `\n #### \n`;
						}
						if(res.tapIndex == 4){
							this.content += `\n ##### \n`;
						}
						if(res.tapIndex == 5){
							this.content += `\n ###### \n`;
						}
					}
				});
			},
			// 删除引用帖子
			clickPostQuoteButton(){
				uni.showModal({
					title: "提示",
					content: "是否要删除引用信息？",
					success: (res) => {
						if(res.confirm) {
							this.postQuoteTitle = "";
							this.postQuotePid = "";
						}
					}
				});
			},
			// 删除附件按钮
			clickDeleteFileButton(fid){
				this.deleteFileFid = fid;
				uni.showModal({
					title: "提示",
					content: "是否要删除本附件？",
					success: (res) => {
						if(res.confirm) {
							this.putEditorPost('clickDeleteFileButton')
						}
					}
				});
			},
			// 附件插入到正文
			clickInsertFileButton(fid){
				this.content += `[file:${fid}]`
			},
			// 打开标题输入框
			clickTitleButton(){
				if(this.titleView == 1){
					this.titleView = 2;
				}else{
					this.titleView = 1;
				}
			},
			// 点击保存草稿按钮
			clickButtonSave(){
				uni.showLoading({
					title:'草稿保存中'
				});
				// 更新草稿
				this.putEditorPost('clickButtonSave')
			},
			// 点击打开草稿列表
			clickEditorDraft(){
				uni.redirectTo({
					url: "/pages/editor/draft"
				});
			},
			// 清空当前
			clickEmptyButton(){
				uni.showModal({
					title: "提示",
					content: "是否清空内容？不可恢复哟，请慎重。",
					success: (res) => {
						if(res.confirm) {
							this.content = "";
						}
					}
				});
			},
		},
		onBackPress(e){
			if(e.from == 'backbutton'){
				// 保存草稿
				this.putEditorPost('clickButtonSave')
				clearInterval(this.timer) // 取消自动保存定时器
				return false;
			}
			// 如果是uni.navigateBack()事件，则直接返回，通常都是发布成功以后调用
			if(e.from == 'navigateBack'){
				clearInterval(this.timer) // 取消自动保存定时器
				return false;
			}
		},
	}
</script>

<style lang="scss">
.editor{
	.editor-title{
		margin: 25rpx 25rpx 0 25rpx;
		margin-bottom: 0;
		font-size: 32rpx;
		line-height: 32rpx;
	}
	.editor-title-placeholder-class{
		color: $ZhanWeiSe;
		font-size: 32rpx;
		line-height: 32rpx;
	}
	.editor-content{
		background: $BeiJingSe;
		min-height: 200rpx;
		font-size: 32rpx;
		line-height: 45rpx;
		margin: 25rpx 25rpx 0 25rpx;
		margin-bottom: 0;
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		width:calc(100% - 100rpx);
		padding: 20rpx 25rpx;
		border-radius: 10rpx 10rpx 0 0;
	}
	.editor-content-placeholder-class{
		color: $ZhanWeiSe;
		font-size: 32rpx;
		line-height: 32rpx;
	}
	.content-options{
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		margin: 0 25rpx;
		display: flex;
		align-items: center;
		background: $BeiJingSe;
		._for{
			display: flex;
			align-items: center;
			line-height: 22rpx;
			padding: 15rpx 0 15rpx 15rpx;
			.text{
				color: $ZhanWeiSe;
				padding-right: 10rpx;
			}
			text{
				font-size: 22rpx;
			}
		}
	}
	.nearby-and-group{
		display: flex;
		align-items: center;
		justify-content:space-between;
		margin: 25rpx 25rpx 0 25rpx;
		._for{
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 28rpx;
			box-shadow: 0 0 1rpx $ZhanWeiSe;
			padding: 13rpx 20rpx;
			border-radius: 100rpx;
			text{
				font-size: 28rpx;
				color: $ZhanWeiSe;
			}
			.text{
				font-size: 22rpx;
			}
		}
		.nearby-and-group-nearby{
			margin-right: 20rpx;
			.text{
				padding: 0 0 0 5rpx;
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		.nearby-and-group-group{
			flex-shrink: 0;
			.text{
				padding: 0 5rpx;
			}
			.icon-essential{
				font-size: 22rpx;
				color: red;
			}
		}
	}
	.select-a-group{
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		margin: 25rpx 25rpx 0 25rpx;
		padding: 20rpx;
		._title{
			text-align: center;
			padding: 15rpx 0 30rpx 0;
			line-height: 28rpx;
			font-size: 28rpx;
			border-bottom: 1rpx dotted $BianKuangSe;
			margin-bottom: 15rpx;
		}
		._for{
			display: flex;
			align-items: center;
			border-bottom: 1rpx dotted $BianKuangSe;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			view{
				font-size: 28rpx;
				line-height: 28rpx;
			}
			._cover{
				width: 50rpx;
				height: 50rpx;
				overflow: hidden;
				border-radius: 100%;
				margin-right: 10rpx;
			}
			._center{
				flex: 1;
			}
			._right{
				line-height: 28rpx;
				text{
					font-size: 28rpx;
					color: $ZhanWeiSe;
					padding-left: 10rpx;
				}
			}
		}
		view:last-child{
			padding-bottom: 0;
			margin-bottom: 0;
			border-bottom: 0;
		}
	}
	.function-buttons{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		padding: 30rpx 20rpx;
		._for{
			line-height: 50rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			text{
				font-size: 50rpx;
			}
		}
		._for-loading{
			margin: 20rpx;
			width: 50rpx;
			height: 50rpx;
			border-radius: 100%;
			overflow: hidden;
		}
		._for-text{
			justify-content: center;
			line-height: 22rpx;
			width: 40rpx;
			height: 40rpx;
			border: 1.5px solid $YuanSe;
			border-radius: 100%;
			margin: 0 20rpx;
			padding: 0;
			._text{
				font-size: 22rpx;
				font-weight: bold;
			}
		}
		._loading{
			width: 40rpx;
			height: 40rpx;
			border: 1.5px solid #FFF;
		}
	}
	.html{
		margin: 0 25rpx 25rpx 25rpx;
		display: flex;
		flex-wrap: wrap;
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		padding: 0 0 25rpx 25rpx;
		view{
			font-size: 28rpx;
			line-height: 28rpx;
			padding: 25rpx 25rpx 0 0;
		}
	}
	.post-quote{
		margin: 0 25rpx 25rpx 25rpx;
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		background: $BeiJingSe;
		line-height: 28rpx;
		padding: 15rpx;
		display: flex;
		align-items: center;
		.icon-yinyong{
			color: $ZhanWeiSe;
		}
		._title{
			flex: 1;
			display: -webkit-box;
			/*!autoprefixer:off*/
			-webkit-box-orient: vertical;
			/*autoprefixer:on*/
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin: 0 5rpx;
		}
		._delete{
			color: $ZhanWeiSe;
			font-size: 22rpx;
			line-height: 22rpx;
		}
	}
	.audio{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 50rpx auto;
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		width: 150rpx;
		height: 150rpx;
		background: $LanSe;
		font-size: 28rpx;
		line-height: 28rpx;
		color: #FFF;
		border-radius: 100%;
	}
	.emoji{
		display: flex;
		flex-wrap: wrap;
		margin: 0 25rpx 25rpx 25rpx;
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		padding: 15rpx 0;
		justify-content: center;
		view{
			font-size: 42rpx;
			line-height: 42rpx;
			padding: 10rpx;
		}
	}
	.stickers{
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		margin: 0 25rpx 25rpx 25rpx;
		background: $BeiJingSe;
		.stickers-tab{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid $BianKuangSe;
			._for{
				line-height: 28rpx;
				font-size: 28rpx;
				padding: 20rpx 0 20rpx 25rpx;
				color: $ZhanWeiSe;
			}
		}
		.stickers-content{
			padding-bottom: 20rpx;
			scroll-view{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				height: 350rpx;
				._for{
					display: inline-block;
					width: 60rpx;
					margin: 20rpx 10rpx 0 10rpx;
				}
			}
		}
	}
	.file-image{
		display: flex;
		flex-wrap: wrap;
		._for{
			width: 216.666rpx;
			height: 150rpx;
			margin: 0 0 25rpx 25rpx;
			overflow: hidden;
			position: relative;
			box-shadow: 0 0 1rpx $ZhanWeiSe;
			._delete{
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				z-index: 2;
				color: #FFF;
				line-height: 30rpx;
				.icon-close{
					font-size: 30rpx;
					text-shadow: 0 0 1rpx #000;
				}
			}
			._for-image{
				width: 216.666rpx;
				height: 150rpx;
				overflow: hidden;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				image{
					display: block;
					width: 216.666rpx;
					height: 150rpx;
				}
			}
			._insert{
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 2;
				color: #FFF;
				width: 216.666rpx;
				height: 40rpx;
				line-height: 22rpx;
				font-size: 22rpx;
				background-color:rgba(0,0,0,0.6);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.file-audio{
		margin: 0 25rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content:space-between;
		._for{
			width: 337.5rpx;
			margin-bottom: 25rpx;
			display: flex;
			text{
				width: 58rpx;
				line-height: 58rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 58rpx;
				border-radius: 100%;
				background: $FuZhuSe;
				color: #FFF;
			}
		}
	}
	.file-video{
		margin: 0 25rpx;
		display: flex;
		justify-content:space-between;
		flex-wrap: wrap;
		._for{
			width: 337.5rpx;
			height: 320rpx;
			overflow: hidden;
			box-shadow: 0 0 1rpx $ZhanWeiSe;
			margin-bottom: 25rpx;
			._delete{
				width: 100%;
				height: 60rpx;
				line-height: 28rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $ZhanWeiSe;
				background: $BeiJingSe;
			}
			._play{
				width: 100%;
				height: 200rpx;
				background: #000;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 100rpx;
				margin: 0;
				padding: 0;
				text{
					color: #FFF;
					font-size: 100rpx;
				}
			}
			._insert{
				width: 100%;
				height: 60rpx;
				line-height: 28rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $ZhanWeiSe;
				background: $BeiJingSe;
			}
		}
	}
	.footer-button{
		display: flex;
		align-items: center;
		justify-content: center;
		._for{
			background: $BeiJingSe;
			box-shadow: 0 0 1rpx $ZhanWeiSe;
			margin: 0 12.5rpx;
			line-height: 28rpx;
			font-size: 28rpx;
			padding: 20rpx 25rpx;
			border-radius: 10rpx;
		}
	}
}
</style>